<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>BlackStar Monitor&amp;Profile System</title>
        <meta http-equiv="pragma" content="no-cache" />
        <link rel="stylesheet" type="text/css" href="/static/extjs/resources/css/ext-all.css" rel="stylesheet" />
        <script type="text/javascript" src="/static/extjs/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="/static/extjs/ext-all.js"></script>    
        <script type="text/javascript" src="../js/help.js"></script>    
        <script type="text/javascript">
Ext.onReady(function(){
    Ext.QuickTips.init();
	Ext.form.Field.prototype.msgTarget = 'side';
	
    var chartPannel = new Ext.Panel({
			        width:850,
			        height:450,
	    			html:'<iframe id="chartFrame" scrolling="auto" frameborder="0" width="100%" height="100%"></iframe>',
	    			refresh : function() {
	    				var frame = document.getElementById("chartFrame");
	    				var time = timeCombo.getValue();
	    				var type = typeCombo.getValue();
	    				var url = '../monitor/' + name + '/' + time + '/' + type + '?refresh=' + new Date().getTime();
	    				frame.src = url;
	    			}
	    });
	    
    var name = QueryString('name');
	var typeValue = [
    	['cpu','CPU'],
    	['PermSpace','PermSpace'],
    	['TenuredSpace','TenuredSpace'],
    	['thread','Thread']
	];
	
	var typeCombo = new Ext.form.ComboBox({
                fieldLabel: '类型',
                name:'type',
                forceSelection: true,
                listWidth: 200,
                store: new Ext.data.SimpleStore({
                    fields: ['value', 'text'],
                    data : typeValue
                    }),
                valueField:'value',
                displayField:'text',
                typeAhead: true,
                mode: 'local',
                triggerAction: 'all',
                selectOnFocus:true,
                allowBlank:false
            });
    typeCombo.setValue('cpu');
    var timeOptions = new Ext.data.JsonStore({
	         	url:'../monitor/' + name,
	         	fields: ['value','text']}); 
    var timeCombo = new Ext.form.ComboBox({
            	fieldLabel: '时间',
            	name:'time',
                forceSelection: true,
                listWidth: 150,
                store: timeOptions,
                valueField:'value',
                displayField:'text',
                typeAhead: true,
                mode: 'local',
                triggerAction: 'all',
                selectOnFocus:true,
                allowBlank:false
            });   
    
   	var queryForm = {
            xtype : 'fieldset',        
            labelAlign : 'left',
            buttonAlign : 'right',
            width : 850,
            labelWidth : 80,
            items : [{
                        layout : 'column', 
                        border : false,
                        labelSeparator : '：',
                        items : [{
                                    columnWidth : 0.4,
                                    layout : 'form',
                                    border : false,
                                    items : [timeCombo]
                                }, {
                                    columnWidth : 0.4,
                                    layout : 'form',
                                    border : false,
                                    items : [typeCombo]
                                }, {
                                    columnWidth : 0.1,
                                    layout : 'form',
                                    border : false,
                                    items : [{
                                    	xtype : 'button',
							        	tooltip : '更新监控信息',
								     	text:"更新",
								     	handler: function() {
								    		chartPannel.refresh();
								     	}
								    }]
                                }, {
                                    columnWidth : 0.1,
                                    layout : 'form',
                                    border : false,
                                    items : [{
                                    	xtype : 'button',
							        	tooltip : '重载页面',
								     	text:"重载页面",
								     	handler: function() {
								    		window.location = window.location  + new Date().getTime();
								     	}
								    }]
                                }]
                    }]

        };       
	timeCombo.on('select', chartPannel.refresh);
	typeCombo.on('select', chartPannel.refresh);
    timeOptions.on('load', function(store, records, options) {
    		if (store.getTotalCount() > 0) {
	    		timeCombo.setValue(store.getAt(0).data.value);
	    		chartPannel.refresh();
	    	}
    	});
    timeOptions.load();    
	
	var viewport = new Ext.Viewport({   
        layout:'border',
        height:'90%',
        width:'100%',
        autoScroll : true,
        enabledTabScroll:true,
        items:[
         {
			  autoScroll : true,
			  enabledTabScroll:true,
         	  bodyStyle: 'padding:20px;',
         	  layout:'anchor',
		      region:"center",    
		      items:[queryForm, chartPannel]
		      } 
         ]
    });
	
});
        </script>
    </head>
    <body style="padding: 10px;"></body>
</html>